import React from 'react';
import { Input } from 'antd';
import { Table ,Button} from 'antd';
import { useEffect } from 'react';
import { role_list } from '../../../utils/api'
import { useState } from 'react';


const { Search } = Input;
function RoleManage(props) {
  let [rolelist, setRolelist] = useState([])
  useEffect(() => {
    //请求角色列表
    role_list().then((res) => {
        console.log(res.data.list);
        setRolelist(res.data.list)
    })
}, [])


const columns = [
  {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
  },
  {
      title: '角色类型',
      dataIndex: 'name',
      key: 'name',
  },
  {
      title: '描述',
      key: 'desc',
      dataIndex: 'desc',
  },
  {
      title: '操作',
      key: 'action',
      render: text => {
          return (
              <>
                  <i className='iconfont icon-bianji' style={{ marginRight: 15 }}></i>
                  <i className='iconfont icon-shanchu'></i>
              </>
          )
      },
  },
];

    
        

    

    return (
        <div className='roleManage'>
           <div className='title'>角色权限管理</div>
            <div className="ope">
            <Search placeholder="输入员工姓名"  enterButton />
            <Button type="primary">新增角色</Button>
            </div>

            {/* columns   决定了表格每一列如何渲染 */}
            {/* dataSource    决定了表格每一行有多少行 */}
            <Table size='small' dataSource={rolelist} columns={columns} />
        </div>
    );
}

export default RoleManage;